<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf8" />
		<meta name="author" content="www.frebsite.nl" />
		<title>jQuery.dotdotdot, 多行内容带省略号的跨浏览器高级插件</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.dotdotdot-1.5.9.min.js"></script>
		<script type="text/javascript" src="js/basis.js"></script>
		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<script type="text/javascript" src="js/prettify.js"></script>
		<link type="text/css" media="all" rel="stylesheet" href="css/reset.css" />
		<link type="text/css" media="all" rel="stylesheet" href="css/style.css" />
		<link type="text/css" media="all" rel="stylesheet" href="css/layout.css" />
		<link type="text/css" media="all" rel="stylesheet" href="css/download.css" />
		<link type="text/css" media="all" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />
		<link type="text/css" rel="stylesheet" href="css/prettify.css" />

	</head>

	<body>
		<div id="header"> <img src="img/header-bg.jpg" alt="dotdotdot" />
			<h1 class="on-top">				
				<em>jQuery.dotdotdot...</em>				
				<a href="http://dotdotdot.frebsite.nl/download.php">下载	<br/><small>最新版本</small></a>
			</h1>
			<a href="https://github.com/BeSite/jQuery.dotdotdot" target="_blank">
				<img src="img/forkme.png" alt="fork me on github" />
			</a>
		</div>
		<div id="content">
			<div id="intro">
				<h4 class="ocn">这是一块溢出的文本...</h4> <span class="arrow arrow-1 o"></span>
				<div class="box box-7 box-half"> Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个未知的印刷者制作了一个活版盘的类型，并且把它制作成一个样本书。它不仅存活了五个世纪，而且引领电子印刷行业的发展，而且在打印键盘等形式上基本上保持不变。</div>
				<h4 class="ecn">...转换后漂亮!</h4> <span class="arrow arrow-2 e"></span>
				<div class="box box-7 box-half box-right ellipsis"> Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个未知的印刷者制作了一个活版盘的类型，并且把它制作成一个样本书。它不仅存活了五个世纪，而且引领电子印刷行业的发展，而且在打印键盘等形式上基本上保持不变。</div>
				<div class="clearer"></div>
			</div> <br />
			
			<p class="txt-1">当有更多的内容的时候，我们如何用省略号来表示更多的内容！<br /> 这样岂不是太棒吗? 它就像引用  <em>overflow: hidden;</em> 但是这样更为亲和!<br /> <a href="#js-1" class="js">查看javascript</a> <span class="arrow arrow-6"></span></p>
		
			<h3>稍等，这里还有更多...</h3>
			<p>需要 &quot;更多&quot;-链接当点击的时候可以查看更多?<br />	
				没问题，我亲爱的朋友!</p>
			<div class="box box-3 ellipsis-a">
				Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个未知的印刷者制作了一个活版盘的类型，并且把它制作成一个样本书。它不仅存活了五个世纪，而且引领电子印刷行业的发展，而且在打印键盘等形式上基本上保持不变。
				<a href="#" onclick="javascript: alert('just a dummy link...'); return false;" title="read more" class="readmore">更多 &raquo;</a>
			</div>
			<p class="txt-2">看看它是怎样把 &quot;更多&quot;-的链接按钮放在了省略号的后边呢？<br />
				这种魅力简直是太令人欣赏了!<br />
				<a href="#js-2" class="js">查看javascript</a>
				<span class="arrow arrow-5"></span></p>


			<h3>再下边就是元素了。</h3>
			<p class="txt-3">不要过于担心你的HTML标记符，<br />
				这个插件认识大多数元素标记符。
				<span class="arrow arrow-3"></span>
				<span class="arrow arrow-4"></span></p>

			<div class="box box-7 box-half">
				<em>Lorem Ipsum</em>只是一个<strong>打印和排版的行业</strong>的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个<em>未知的印刷者</em>制作了一个活版盘的类型，并且把它制作成一个样本书。<strong>它不仅存活了五个世纪</strong>，而且引领<strong>电子印刷行业</strong>的发展，而且在打印键盘等形式上基本上保持不变。
			</div>
			<div class="box box-7 box-half box-right ellipsis-e">
				<em>Lorem Ipsum</em>只是一个<strong>打印和排版的行业</strong>的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个<em>未知的印刷者</em>制作了一个活版盘的类型，并且把它制作成一个样本书。<strong>它不仅存活了五个世纪</strong>，而且引领<strong>电子印刷行业</strong>的发展，而且在打印键盘等形式上基本上保持不变。
			</div>
			<div class="clearer"></div>
			<br />
			<p>标记：它不建议用以下元素 <code>display: block;</code> 例如 <code>DIV</code> or <code>UL</code>.<br />
				<a href="#js-3" class="js">查看 javascript </a></p>


			<h3>那么流体布局如何呢?</h3>
			<p class="txt-4">下边的布局将随着你的窗体进行重置。<br />
				那么你继续重置你的窗体吧，省略号将随着进行移动！微笑吧！骚年！</p>
			<div class="box box-3 ellipsis-r">
				Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个未知的印刷者制作了一个活版盘的类型，并且把它制作成一个样本书。它不仅存活了五个世纪，而且引领电子印刷行业的发展，而且在打印键盘等形式上基本上保持不变。Lorem Ipsum只是一个打印和排版的行业的简单制作样本。1500年以前Lorem Ipsum曾经是这个行业的标准制作样本，直到一个未知的印刷者制作了一个活版盘的类型，并且把它制作成一个样本书。它不仅存活了五个世纪，而且引领电子印刷行业的发展，而且在打印键盘等形式上基本上保持不变。
			</div>
			<p class="txt"><a href="#js-4" class="js">查看javascript</a></p>

			<h3>太酷了! 截断路径名称！</h3>
			<p class="txt-3">把省略号放在一个很长的路径之后使它变得更漂亮，<br />
				当你使用dotdotdot的时候。</p>
			<div class="box box-3 box-half">
				<div class="pathname">www.website.com/file.html</div>
				<div class="pathname">www.website.com/that/should/be/truncated/before/the/file.html</div>
			</div>
			<div class="box box-3 box-half box-right ellipsis-p">
				<div class="pathname">www.website.com/file.html</div>
				<div class="pathname">www.website.com/that/should/be/truncated/before/the/file.html</div>
			</div>
			<div class="clearer"></div>
			<p class="txt"><a href="#js-5" class="js">查看 javascript</a></p>


			<h2>怎样使用插件？</h2>
			<p>在头部&lt;head&gt;区域包含必要的js文件.</p>
			<div class="code-txt">
<pre class="prettyprint lang-xhtml linenums">
&lt;head&gt;
	&lt;script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;jquery.dotdotdot.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
</pre>
			</div>
			<p>使用DOM元素，把文本和HTML标记放在 &quot;wrapper&quot中;.</p>
			<div class="code-txt">
<pre class="prettyprint lang-xhtml linenums">
&lt;div id=&quot;wrapper&quot;&gt;
	&lt;p&gt;Lorem Ipsum is simply dummy text.&lt;/p&gt;
&lt;/div&gt;
</pre>
			</div>
			<p>将插件放在onDocumentReady中。</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;#wrapper&quot;).dotdotdot({
		//在这里进行配置
	});
});
</pre>
			</div>

			<h2>配置选项</h2>
			<p>这个 dotdotdot 插件运用一些配置选项可以任意的进行配置。<br />
				以下是所有的配置选项（都是默认的选项）：<br/>
			        译者注：为了不影响原意思，将英文保留。</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;#wrapper&quot;).dotdotdot({
		/*	The text to add as ellipsis. */
		/*	译：指定的文本作为省略符。 */
		ellipsis	: '... ',

		/*	How to cut off the text/html: 'word'/'letter'/'children' */
		/*	译：截取 text/html的方式: 'word'/'letter'/'children' */
		/*	注：对于中国语言来说，必须用lettter（翻译者hongwei备注） */
		wrap		: 'word',

		/*	Wrap-option fallback to 'letter' for long words */
		/*	译：长文本用'letter'时，是否可以回退 */
		fallbackToLetter: true,

		/*	jQuery-selector for the element to keep and put after the ellipsis. */
		/*	译：在jQuery选择元素的 省略号后放置内容*/
		after		: null,

		/*	Whether to update the ellipsis: true/'window' */
		/*	译：（自适应时）是否一直更新省略号: true/'window' */
		watch		: false,
	
		/*	Optionally set a max-height, can be a number or function.
			If null, the height will be measured. */
		/*	译：设置一个最大高度的配置，可以是数字或功能。
		        如果为空，高度将为被自动测量。 */
		height		: null,

		/*	Deviation for the height-option. */
		/*	译：高度配置偏差。 */
		tolerance	: 0,

		/*	Callback function that is fired after the ellipsis is added,
			receives two parameters: isTruncated(boolean), orgContent(string). */
		/*	译：在省略号被添加后，触发回调函数，
		 	接受两个参数：isTruncate(boolean),orgContent(string)。*/
		callback	: function( isTruncated, orgContent ) {},

		lastCharacter	: {

			/*	Remove these characters from the end of the truncated text. */
			/*	译：从截取的文本中去掉这些字符。*/
			/*	注：国人应该多加一些双字节的标点符号。*/
			remove		: [ ' ', ',', ';', '.', '!', '?' ],

			/*	Don't add an ellipsis if this array contains 
				the last character of the truncated text. */
			/*	译：如果该数组包含截断文本的最后一个字符，则不加省略号。 */
			noEllipsis	: []
		}
	});
});
</pre>
			</div>

			<h2>自定义事件</h2>
			<p>是否需要手动更新省略号？触发 &quot;update&quot;-事件。</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	$(&quot;#wrapper&quot;).trigger(&quot;update&quot;);
});
</pre>
			</div>

			<p>你想知道文本是否被截取？ 触发 &quot;isTruncated&quot;-event.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	//	by using the return-value...
	var isTruncated = $(&quot;#wrapper&quot;).triggerHandler(&quot;isTruncated&quot;);
	if ( isTruncated ) {
		//	do something
	}
	
	//	...or by using the callback function
	$(&quot;#wrapper&quot;).trigger(&quot;isTruncated&quot;, function( isTruncated ) {
		if ( isTruncated ) {
			//	do something
		}
	});
});
</pre>
			</div>

			<p>你需要原始的内容? 触发 &quot;originalContent&quot;-事件.</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	//	by using the return-value...
	var content = $(&quot;#wrapper&quot;).triggerHandler(&quot;originalContent&quot;);
	$(&quot;#foo&quot;).append( content );
	
	//	...or by using the callback function
	$(&quot;#wrapper&quot;).trigger(&quot;originalContent&quot;, function( content ) {
		$(&quot;#foo&quot;).append( content );
	});
});
</pre>
			</div>

			<p>你想要删除省略号的内容？触发 &quot;destroy&quot;-事件。</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#button&quot;).click(function() {
	$(&quot;#wrapper&quot;).trigger(&quot;destroy&quot;);
});
</pre>
			</div>

			<p>请注意：所有的自定义事件都采用".dot"作为命名空间，因此为了防止其他脚本的干扰，最好触发一个事件。</p>
			<div class="code-txt">
<pre class="prettyprint lang-js linenums">
$(&quot;#wrapper&quot;).trigger(&quot;update.dot&quot;);
</pre>
			</div>

		</div>

		<div class="code-wrapper">
			<div id="js-1" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot({
		wrap: &quot;letter&quot; ; //国人用letter
	});
});
</pre>
			</div>
			<div id="js-2" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot({
		wrap: &quot;letter&quot,  //国人用letter
		after: &quot;a.readmore&quot;
	});
});
</pre>
			</div>
			<div id="js-3" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot({
		wrap: &quot;letter&quot; ; //国人用letter
	});
});
</pre>
			</div>
			<div id="js-4" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$(document).ready(function() {
	$(&quot;.ellipsis&quot;).dotdotdot({
		wrap: &quot;letter&quot; ; //国人用letter
		watch: &quot;window&quot;
	});
});
</pre>
			</div>
			<div id="js-5" class="code">
				<p>JavaScript:</p>
<pre class="prettyprint lang-js linenums">
$('#dot5 .pathname').each(function() {
	var path = $(this).html().split( '/' );
	if ( path.length > 1 ) {
		var name = path.pop();
		$(this).html( path.join( '/' ) + '&lt;span class=&quot;filename&quot;&gt;/' + name + '&lt;/span&gt;' );
		$(this).dotdotdot({
			after: 'span.filename',
			wrap: 'letter'
		});						
	}
});
</pre>
			</div>
		</div>
		
	</body>
</html>